<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Social User Profile Page in HTML5/CSS3[DEMO]</title>
    <link href="lib/bootstrap/2.3.2/css/bootstrap.css"   rel="stylesheet">
   <link rel="stylesheet" type="text/css" href="lib/soshalib/profile.css" />
</head>

<body>
<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="navbar">
        <div class="navbar-inner">
            <div class="container-fluid">
                <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </a>
                <a href="#" class="brand">Soshalboard</a>

                <div class="nav-collapse collapse">
                    <ul class="nav">
                        <li><a href="/">Home</a></li>
                        <li><a href="/user/me">Wishlist</a></li>
                        <li><a href="/about.html">About</a></li>
                    </ul>
                    <ul class="nav pull-right" id="userrightmenu" style="display: none;">
                        <li id="fat-menu" class="dropdown active">
                            <a href="#" id="username" role="button" class="dropdown-toggle" data-toggle="dropdown">Logging in.. <b class="caret"></b></a>
                            <ul class="dropdown-menu" role="menu" aria-labelledby="drop3">
                                <li><a tabindex="-1" href="/userprofile.html">Profile</a></li>
                                <li class="divider"></li>
                                <li><a tabindex="-1" onclick="doLogout();">Logout</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
                <!--/.nav-collapse -->
            </div>
        </div>
    </div>
</div>

<div id="content" class="clearfix" style="padding-top: 50px;">
    <section id="left">
        <div id="userStats row-fluid" class="clearfix">
            <div id="userpic" class="pic" style="width: 150px;height: 150px;">
            </div>

            <div class="data">
                <h1><div id="usernamebody">Johnny Appleseed</div></h1>
                <h3>San Francisco, CA</h3>
                <h4><a href="http://spyrestudios.com/">http://spyrestudios.com/</a></h4>
                <div class="socialMediaLinks">
                    <a href="http://twitter.com/jakerocheleau" rel="me" target="_blank"><img src="assets/images/twitter.png" alt="@jakerocheleau" /></a>
                    <a href="http://gowalla.com/users/JakeRocheleau" rel="me" target="_blank"><img src="assets/images/gowalla.png" /></a>
                </div>
                <div class="sep"></div>
                <ul class="numbers clearfix">
                    <li>Wishes<strong>185</strong></li>
                    <li class="nobrdr">Completed<strong>344</strong></li>
                </ul>
            </div>
        </div>

        <h1>About Me:</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </section>

    <section id="right">
        <div class="gcontent">
            <div class="head"><h1>Completed Wishes</h1></div>
            <div class="boxy">
                <p>Keep working to unlock badges!</p>

                <div class="badgeCount">
                    <a href="#"><img src="assets/images/foursquare-badge.png" /></a>
                    <a href="#"><img src="assets/images/foursquare-badge.png" /></a>
                    <a href="#"><img src="assets/images/foursquare-badge.png" /></a>
                </div>

                <span><a href="#">See all…</a></span>
            </div>
        </div>

        <div class="gcontent">
            <div class="head"><h1>Friends</h1></div>
            <div class="boxy">
                <p>These friends are looking for something</p>

                <div class="friendslist clearfix">
                    <div class="friend">
                        <a href="#"><img src="assets/images/friend_avatar_default.jpg" width="30" height="30" alt="Jerry K." /></a><span class="friendly"><a href="#">Jerry K.</a></span>
                    </div>

                    <div class="friend">
                        <a href="#"><img src="assets/images/friend_avatar_default.jpg" width="30" height="30" alt="Katie F." /></a><span class="friendly"><a href="#">Katie F.</a></span>
                    </div>

                    <div class="friend">
                        <a href="#"><img src="assets/images/friend_avatar_default.jpg" width="30" height="30" alt="Ash K." /></a><span class="friendly"><a href="#">Ash K.</a></span>
                    </div>

                </div>

                <span><a href="#">See all...</a></span>
            </div>
        </div>
    </section>
</div>

<script src="lib/js/jquery-1.10.2.js"></script>
<script src="lib/bootstrap/2.3.2/js/bootstrap.js"></script>
<script>
    window.fbAsyncInit = function() {
        // init the FB JS SDK
        FB.init({
            appId		: '454209954617767',	// App ID from the app dashboard
            channelUrl	: '/channel.html',   	// Channel file for x-domain comms
            status		: true,					// Check Facebook Login status
            xfbml		: true					// Look for social plugins on the page
        });

        (function(d, s, id){
            var js, fjs = d.getElementsByTagName(s)[0];
            if (d.getElementById(id)) {return;}
            js = d.createElement(s); js.id = id;
            js.src = "//connect.facebook.net/en_US/all.js";
            fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));


    };

    function showRightMenu(){
        var userFirstName = localStorage.getItem('userFirstName');
        $('#username').text("Logged in as "+userFirstName);
        $('#usernamebody').text(userFirstName);

        $('#userrightmenu').show();
        FB.api("/me/picture?width=150&height=150",  function(response) {
            if (!response || response.error) {
                localStorage.setItem("login","false");
                window.location.href = "/";
            } else {
                console.log(response.data.url);
                $('<img src="'+ response.data.url +'">').load(function() {
                    $(this).width(150).height(150).appendTo('#userpic');
                });
            }
        });


    }

    function doLogout(){
        localStorage.setItem("login","false");
        window.location.href = "/";
    }

    $(document).ready(function(){
        showRightMenu();

    });
</script>

</body>
</html>